<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.des{
				text-decoration: line-through;
				color: #ddd;
			}
		</style>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
		  <ul>
			 <!-- <li v-for="todo in todos"  :class="{des:todo.done}" >
				  {{todo.text}}-------{{todo.done}}
			  </li> -->
			  
			 <!-- <li v-for="todo in todos"  :style="{textDecoration:'line-through'}" >
			  			 {{todo.text}}-------{{todo.done}}
			   </li> --> 
			   
			   <li v-for="todo in todos"  :style="todo.done ?sty:'' " >
			   			 {{todo.text}}-------{{todo.done}}
			    </li>
		  </ul>
			
			
			
			
		</div>
	<script>
		var vm=new Vue({
			el:"#app",
			data:{
				todos:[
					{
					  text:'学习vue',
					  done:true
					},
					{
					  text:'逛超市',
					  done:false
					},
					{
					  text:'去游泳',
					  done:true
					},
					{
					  text:'打篮球',
					  done:false
					}
				],
				sty:{
					textDecoration:'line-through',
					color:'#ddd'
				}
				
			}
		})
		
		
		
	</script>	
	</body>
</html>
